<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        render(){
            return (
                <div>
                    App
                    <Child></Child>
                </div>
            )
        }
    }
    class Child extends React.Component{
        render(){
            return (
                <div>
                    Child
                </div>
            )
        }
    }
    const {Component} = React;
    class Box extends Component{
        render(){
            return (
                <div>
                    Box
                    <button onClick={()=>{
                        console.log(this)
                    }}>点我1</button>
                    <button onClick={function (){
                        console.log(this)
                    }}>点我2</button>
                </div>
            )
        }

    }
    root.render(<Box/>)
</script>
</html>